'use client'
import { Button } from '@/components/ui/button'
import { useEffect, useState } from 'react'
import { MovieHistoryDialog } from './MovieHistoryDialog'
import { useVideoStore } from '@/stores/video'
import { downloadFile } from '@/lib/download'

export function PreviewSection({
  createdId,
  videoUrl,
}: {
  createdId: string
  videoUrl: string
}) {
  const [isOpenHistory, setIsOpenHistory] = useState(false)

  const [currentVideoUrl, setCurrentVideoUrl] = useState('')
  const { videoStatusInfo } = useVideoStore()

  useEffect(() => {
    if (videoUrl) {
      setCurrentVideoUrl(videoUrl)
    }
  }, [videoUrl])

  const download = () => {
    downloadFile(currentVideoUrl)
  }
  const handleOpenHistory = () => {
    // 打开历史记录对话框
    setIsOpenHistory(true)
  }
  const handleCheckUrl = (val: boolean, newUrl: string | null) => {
    setIsOpenHistory(val)
    if (!val && newUrl !== null) {
      setCurrentVideoUrl(newUrl)
    }
  }
  const getCurrentVideo = () => {
    setCurrentVideoUrl(videoUrl)
  }
  return (
    <div className="basis-[400px] flex-2 flex flex-col h-full pr-6">
      {/* 顶部按钮 */}
      <div className="flex justify-end pb-4">
        <div className="flex gap-x-2">
          <Button onClick={getCurrentVideo} size="sm">
            Current Video
          </Button>
          <Button variant="secondary" size="sm" onClick={handleOpenHistory}>
            History
          </Button>
        </div>
      </div>

      {/* 中间内容区域 */}
      <div className="flex-1 flex justify-between flex-col p-4 bg-white/10 rounded-lg">
        {/* 预览图片 */}
        <div className="mb-4 relative flex-1">
          <div className="absolute left-0 top-0 w-full h-full z-10 bg-black/40 rounded-lg">
            {!!currentVideoUrl && (
              <video
                className="max-w-full max-h-full"
                width={500} // 你可以根据需要调整宽度和高度
                height={300} // 你可以根据需要调整宽度和高度
                controls
                src={currentVideoUrl}
              ></video>
            )}
          </div>
        </div>

        {/* 底部进度条和下载按钮 */}
        <div className="p-4">
          <div className="mb-4">
            {videoStatusInfo && (
              <div className="flex h-[20px] py-2 justify-center border text-xs text-gray-500 mb-2">
                <span>{videoStatusInfo}</span>
                {/* <span>等待上传视频</span> */}
                {/* <span>处理中</span>
              <span>视频处理完成</span>
              <span>生成中</span>
              <span>生成完成</span> */}
              </div>
            )}

            {/* <div className="h-1 bg-gray-100 rounded-full">
              <div className="w-1/5 h-full bg-blue-600 rounded-full"></div>
            </div> */}
          </div>
        </div>
      </div>

      <div className="my-5 flex justify-end">
        <Button disabled={!currentVideoUrl} onClick={download} variant="outline">
          Download Video
        </Button>
      </div>
      <MovieHistoryDialog
        open={isOpenHistory}
        onOpenChange={handleCheckUrl}
        createdId={createdId}
      />
    </div>
  )
}
